<template>
    <div class="form-item">
        <div class="label color_black_45">{{ label }}</div>
        <div class="value color_black_85">{{ value }}</div>
    </div>
</template>
<script>
export default {
    name: 'FormItem',
    props: {
        label: {
            type: String,
            required: true
        },
        value: {
            type: [String, Number]
        }
    },
}
</script>
<style scoped lang="scss">
.form-item {
    display: flex;
    // align-items: center;
    font-size: inherit;

    .label {
        display: flex;
        align-items: flex-start;
        margin-right: 10px;
        flex-shrink: 0;
    }

    .value {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
}

.color_black_85 {
    color: rgba(#000, .85);
}

.color_black_45 {
    color: rgba(#000, .45);
}
</style>